<template>
  <div>
    <p class="tips"> 
      <span class="titles-it" v-html="title">
      </span> 
      <button class="person-button btn btn-primary" @click="proTable.add=true">添加</button>
    </p>
    <table class="default-table">
      <tr >
        <th width="20%">姓名</th>
        <th width="15%">手机号</th>
        <th width="15%">密码</th>
        <th width="20%">操作</th>
      </tr>
      <tr v-for="(item,i) in userList">
        <td>
          <input v-model="item.name" v-if="item.id==proTable.editNum"/>
          <span v-if="item.id!=proTable.editNum">{{item.name}}</span>
        </td>
        <td>
          <input v-model="item.phone" v-if="item.id==proTable.editNum"/>
          <span v-if="item.id!=proTable.editNum">{{item.phone}}</span>
        </td>
        <td>
          <input v-model="item.password" v-if="item.id==proTable.editNum"/>
          <span v-if="item.id!=proTable.editNum">********</span>
        </td>
        <td>
          <button @click="delConfirm(item.id)" v-if="item.id!=proTable.editNum">删除</button>
          <button @click="proTable.editNum=item.id" v-if="item.id!=proTable.editNum">修改</button>
          <button @click="saveUser(item)" v-if="item.id==proTable.editNum">确认</button>
          <button @click="vm.proTable.editNum=-1" v-if="item.id==proTable.editNum">取消</button>
        </td>
      </tr>
      <tr v-if="proTable.add==true">
        <td>
          <input v-model="proTable.addObj.name" 
          v-validate="'required'" 
          data-vv-name="name" 
          :class="{'require-input-valid': errors.has('name') }" />
        </td>
        <td >
          <input v-model="proTable.addObj.phone"
          v-validate="'required'" 
          data-vv-name="phone" 
          :class="{'require-input-valid': errors.has('phone') }" />
        </td>
        <td >
          <input v-model="proTable.addObj.password"
          v-validate="'required'" 
          data-vv-name="password" 
          :class="{'require-input-valid': errors.has('password') }" />
        </td>
        <td >
          <button @click="saveUser()">确认</button>
          <button @click="proTable.add=false">取消</button>
        </td>
      </tr>
    </table>
    <ConfirmModal v-if="delObj.open" :msg="delObj.msg" @confirm="deleteUser" @cancel="cancelDel"/>
  </div>
</template>


<script type="text/javascript">
import ConfirmModal from '@/common/components/modals/ConfirmModal';
import userService from '@/common/service/userService';
import commonFactory from '@/common/factory/commonFactory';
export default {
  props: ['title', 'userType'],
  name: 'add-role',

  data () {
    return {
      proTable: {
        add: false,
        editNum: -1,
        addObj: {
        }
      },
      userList: [],
      delObj: {
        open: false,
        id: Number,
        msg: '确定删除'
      }
    };
  },
  mounted () {
    this.init();
  },
  methods: {
    async saveUser (item) {
      let vm = this, data;
      await vm.$validator.validate();
      if (!commonFactory.checkValid(vm, vm.proTable.addObj)) {
        return;
      }
      if (item) {
        vm.proTable.editNum = -1;
        data = await userService.saveUser(item);
      } else {
        vm.proTable.addObj.type = vm.userType;
        data = await userService.saveUser(vm.proTable.addObj);
      }
      if (data.data.success) {
        vm.getUserList();
        vm.addObj = {};
        vm.proTable.add = false;
      }
    },
    async deleteUser () {
      let vm = this,
      data = await userService.deleteUser(`userId=${vm.delObj.id}`);
      this.delObj.open = false;
      if (data.data.success) {
        vm.getUserList();
      }
    },
    async getUserList () {
      let vm = this,
      data = await userService.getUserList(vm.userType);
      vm.userList = data.data.data;
    },
    delConfirm (id) {
      this.delObj.open = true;
      this.delObj.id = id;
    },
    cancelDel () {
      this.delObj.open = false;
    },
    init () {
      let vm = this;
      vm.getUserList();
    }
  },
  components: {
    ConfirmModal
  }
};
</script>

<style lang="less" scoped>
.mech-info {
  .role{
    margin-top: 20px;
  }
  .project,.invest{
    .tips{
      .titles-it{
        width: 184px;
        font-size: 18px;
        display: inline-block;
      }
    }
    table{
      width: 900px;
    }
    .person-button{
      margin: 20px 0 0 740px;
    }
  }
}
.company-person{
  .titles-it{
    width: 184px;
    font-size: 18px;
    display: inline-block;
  }
  .person-button{
    float: right;
  }
}
</style>
